

import { Button, Modal, ModalProps } from 'antd';
import './Screen.scss';
import { CloseOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import React from 'react';


interface IProps {
  /** 标题 */
  title?: string,
  /** 内容插槽 */
  contentSlot?: React.ReactNode,
  /** 头部插槽 */
  headerSlot?: React.ReactNode,
  /** 底部部插槽 */
  footerSlot?: React.ReactNode,
  /** 点击关闭 */
  onClose?: () => void,
  /** 对话框外层容器的类名 */
  wrapClassName?: string
  /** 窗口变化 */
  onResize?: () => void,
  /** 宽度 */
  width?: string,
  /** 高度 */
  height?: string,
  /** 是否全屏 */
  isFull?: boolean,
  /** 是否显示全屏按钮 */
  showFullIcon?: boolean,
}
interface Vars {
  /** 外层样式 */
  style: React.CSSProperties,
}

const ScreenModal = React.forwardRef<any, IProps>((props, ref) => {
  //  暴露 属性 和 方法
  React.useImperativeHandle(ref, () => ({
    header: {
      ref: headerRef,
    },
    content: {
      ref: contentRef,
      height: contentRef?.current?.offsetHeight || 0
    },
    footer: {
      ref: footerRef,
    },
  }), []);

  const {
    contentSlot = <></>,
    headerSlot = <></>,
    footerSlot = <></>,
    onClose = () => { },
    onResize = () => { },
    title = '',
    wrapClassName = '',
    height = '94vh',
    isFull = false,
    showFullIcon = false,
  } = props;
  const [vars, setVars] = React.useState<Vars>({
    style: {
      height: `${height}`,
      top: `calc((100vh - ${height}) / 2)`
    }
  });
  const [width, setWidth] = React.useState(props.width ?? '96vw');
  const [isFullscreen, setFullscreen] = React.useState(isFull);

  /** 点击全屏按钮 */
  const onFullscreen = () => {
    setFullscreen(!isFullscreen);
    renderStyle();
    onResize();
  };
  /** 设置外层样式 */
  const renderStyle = () => {
    if (isFullscreen) {
      setVars({
        style: {
          height,
          top: `calc((100vh - ${height}) / 2)`
        }
      });
      setWidth(props.width ?? '96vw');
    } else {
      setVars({
        style: {
          height: `100vh`,
          top: `0`
        }
      });
      setWidth('100vw');
    }
  };

  React.useEffect(() => {
  }, []);


  /** 弹框属性 */
  const modalProps: ModalProps = {
    /** 底部内容 */
    footer: null,
    /** 关闭时销毁 Modal 里的子元素 */
    destroyOnClose: true,
    /** 关闭图标 */
    closeIcon: false,
    /** 对话框外层容器的类名 */
    wrapClassName,
  };

  React.useEffect(() => {
    (async () => {
    })()
  }, []);

  const headerRef = React.useRef<HTMLDivElement>(null);
  const contentRef = React.useRef<HTMLDivElement>(null);
  const footerRef = React.useRef<HTMLDivElement>(null);


  return (
    <Modal
      open={true}
      onCancel={onClose}
      title={''}
      {...modalProps}
      width={width}
      style={vars.style}
      className={`web-screen-modal`}>

      <div className='web-screen-modal-header'>
        <div className='title'>{title}</div>
        <div className='flex1'></div>
        <div className='btns'>
          {/* 全屏按钮 */}
          {
            showFullIcon &&
            <Button onClick={onFullscreen} className='full-screen-btn' type="text" shape="circle" size='middle'
              icon={isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />} />
          }
          <Button onClick={onClose} className='close-btn' type="text" shape="circle" size='middle' icon={<CloseOutlined />} />
        </div>
      </div>

      <div ref={headerRef} className='headerSlot'>
        {headerSlot}
      </div>

      <div ref={contentRef} className='contentSlot'>
        {contentSlot}
      </div>

      <div ref={footerRef} className='footerSlot'>
        {footerSlot}
      </div>
    </Modal>
  )
});


export default ScreenModal;